 <style>
     .grid-sidebar,
     .grid-sidebar:before {
         transition: margin-left .3s ease-in-out, width .3s ease-in-out;
         width: 260px;
     }

     @media (max-width: 768px) {

         .grid-sidebar,
         .grid-sidebar:before {
             box-shadow: none !important;
             margin-left: -253px;
         }

         .grid-box {

             margin-left: 7px;
         }
     }

     :not(.layout-fixed) .grid-sidebar {
         height: inherit;
         min-height: 100%;
         position: absolute;
         top: 0;
     }

     .grid-sidebar {
         height: 100vh;
         overflow-y: hidden;
         z-index: 1038;
     }

     .grid-sidebar div {
         float: left;
     }

     .grid-sidebar .da-tree {
         width: 253px;
     }

     #openClose {

         outline-style: none;
         outline-width: medium;
         height: 100vh;
         width: 7px;
         display: block;
         float: left;
         top: 0;
         border-left: 1px solid #eff1f7;

     }

     #openClose:hover {
         background-color: #eff1f7;

     }

     #openClose span {
         margin-top: 50vh;

     }
 </style>
 <div class="grid-sidebar shadow sidebar-light-primary">
     <div {!! $attributes !!}>
         <div class="da-tree "></div>
     </div>
     <a id="openClose" class="open" title="展开与关闭">
         <span class="fa fa-angle-left"></span>
    </a>
 </div>
 <script require="@jstree">
     var opts = {!!admin_javascript_json($options)!!},
         $tree = $('#{{$id}}').find('.da-tree');

     opts.core.data = {!!json_encode($nodes)!!};
     var pjaxdata = {};
     $tree.on("loaded.jstree", function() {
         $tree.jstree('open_all');
     }).jstree(opts).on("changed.jstree", function(node, action) {

         pjaxdata = {
             data: {
                 _selector: {
                     {!!$column!!}: action.selected.toLocaleString()
                 }
             },
             container: '#pjax-container'
         }

     });
     $('#{{$id}}').on("click", "a", function() {
         var xhr = $.pjax(pjaxdata)
     })
     $(function(){
     $(document).on("click","#openClose", function() {
    
         var marginleft = $(".grid-sidebar").css("margin-left");
         console.log(marginleft);
         if (marginleft=='-253px') {
                 $(".grid-sidebar").css("margin-left", "0px");
                 if ($(window).width()>757) 
                    $(".grid-box").css("margin-left", "260px");
         } else {
                 $(".grid-sidebar").css("margin-left", "-253px");
                 $(".grid-box").css("margin-left", "7px");
         }
     })
     $(window).resize(function(){
 
        if ($(this).width()>757) {
            $(".grid-sidebar").css("margin-left", "0px");
            $(".grid-box").css("margin-left", "260px");
                 
         } else {
                 $(".grid-sidebar").css("margin-left", "-253px");
                 $(".grid-box").css("margin-left", "7px");
         }
     })
    })
 </script>